<!DOCTYPE html>
<html>
<!-- Mirrored from www.zi-han.net/theme/hplus/empty_page.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:52 GMT -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航设置</title>
    <meta name="keywords" content="第八站,广告分类,后台HTML,响应式后台">
    <meta name="description" content="第八站管理后台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">

    <link rel="stylesheet" href="libs/treeTable/Content/bootstrap-table.css">
    <link rel="stylesheet" href="libs/treeTable/Content/jquery.treegrid.min.css">

    <style type="text/css">
    .checkbox input[type=checkbox],
    .checkbox-inline input[type=checkbox],
    .radio input[type=radio],
    .radio-inline input[type=radio] {
        margin-top: 1px;
        margin-left: -15px;
    }
    .checkbox-inline {
        margin-bottom: 10px!important;
    }
    .label-wrapper {
        width: 100%;
        height: 500px;
        overflow: auto;
    }
    .glyphicon-triangle-right1{
       background-image: url(libs/treeTable/img/expand.png);
    }
    .glyphicon-triangle-bottom1{
       background-image: url(libs/treeTable/img/collapse.png);
    }
    </style>
</head>

<body class="gray-bg">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>导航设置</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index-2.html">主页</a>
                </li>
                <li>
                    <span>官网WEB</span>
                </li>
                <li>
                    <strong>树表格</strong>
                </li>
            </ol>
        </div>
        <div class="col-sm-8">
            <div class="title-action">
                <!-- <a href="empty_page.html" class="btn btn-primary">活动区域</a> -->
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="ibox float-e-margins">
            <div class="ibox-content container-fiuled">
                <table id="table" class="table-no-bordered"></table>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content2.min.js?v=1.0.0"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="libs/treeTable/Scripts/bootstrap-table.js"></script>
    <script src="libs/treeTable/Scripts/bootstrap-table-treegrid.js"></script>
    <script src="libs/treeTable/Scripts/jquery.treegrid.min.js"></script>
    <script type="text/javascript">
    function getCheckData() {
        var arr = new Array();
        $('.chooseFruit:checked').each(function(i) {
            arr[i] = parseInt($(this).val());
        });
        console.log(arr);
    }

    $('.deleteBtn').click(function() {
        swal({
            title: "您确定要删除这条数据吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function() {
            // do someting
            swal("删除成功！", "您已经永久删除了这条数据。", "success");
        });
    });
    </script>

    <script type="text/javascript">
    $(function() {
        var $table = $("#table");

        $table.bootstrapTable({
            url: 'libs/treeTable/json/treegrid.json',// 请求数据路径
            striped: true,
            sidePagenation: 'server',
            idField: 'id',
            columns: [ {
                field: 'name',
                title: '名称'
            }, {
                field: 'id',
                title: '操作',
                align: 'right',
                formatter: 'statusFormatter'
            }],
            treeShowField: 'name',
            parentIdField: 'pid',
            onLoadSuccess: function(data) {
                $table.treegrid({
                    initialState: 'collapsed', //收缩  
                    treeColumn: 0, //指明第几列数据改为树形  
                    expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom1',
                    expanderCollapsedClass: 'glyphicon glyphicon-triangle-right1',
                    onChange: function() {
                        $table.bootstrapTable('resetWidth');
                    }
                });
                 $table.removeClass('table-hover').removeClass('table-striped')
            }
        });
    })

    // 添加操作按钮
    function statusFormatter(value, row, index) {
        return '<button type="button" class="btn btn-xs btn-success margin-r-20" onclick="editorTable(' + value + ')">编辑</button>' +
               '<button type="button" class="btn btn-xs btn-danger" onclick="deleteTable(' + value + ')">删除</button>';
    }
    // 编辑操作
    function editorTable(id) {
        console.log('编辑',id);
    }

    // 删除操作
    function deleteTable(id){
        swal({
            title: "您确定要删除这条数据吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            console.log('删除',id);
            swal("删除成功！", "您已经永久删除了这条数据。", "success");
        });
    }
    </script>
</body>
<!-- Mirrored from www.zi-han.net/theme/hplus/empty_page.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:52 GMT -->

</html>